<template>
  <div class="detail-nav">
    <nav-bar>
      <template #left>
        <div @click="backClick">
          <img src="~assets/img/common/back.svg" alt="">
        </div>
      </template>

      <template #center>
        <div class="title">
          <span
            @click="titleClick(i)"
            :class="{active: currentIndex===i}"
            v-for="(item, i) in titles">{{ item }}</span>
        </div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar'

  export default {
    name: "",
    data(){
      return {
        titles: ['商品', '参数', '评论', '推荐'],
        currentIndex: 0
      }
    },
    props: {
      scrollIndex: {
        type: Number,
        default: 0
      }
    },
    methods: {
      backClick(){
        this.$router.go(-1)
      },
      titleClick(index){
        this.currentIndex = index

        this.$emit('titleClick', index)
      }
    },
    components: {
      NavBar
    }
  }
</script>

<style lang="less" scoped>
.detail-nav{
  position: relative;
  background-color: #fff;
  z-index: 9;
  img{
    vertical-align: middle;
  }
  .title{
    display: flex;
    span{
      flex: 1;
      font-size: 14px;
    }
  }
}

.active{
  color: var(--color-high-text);
}
</style>
